<template>
  <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="模态消息">
    <a-button @click="showInfo" class="ml-5 mt-5"> 基本用法 </a-button>
    <a-button @click="showSuccess" color="success" class="ml-5 mt-5"> 不居中展示 </a-button>
    <a-button @click="showWarn" color="warning" class="ml-5 mt-5"> 自定义按钮文本 </a-button>
    <a-button @click="showError" color="error" class="ml-5 mt-5"> 监听点击按钮 </a-button>

    <div class="w-full bg-white rounded-md">
      <ol class="ml-5 mt-5 pb-3">
        <li class="mt-2">封装的是 ant 的 modal 组件 </li>
        <li class="mt-2">对话框元素: 标题、内容、按钮(ok&cancel) </li>
        <li class="mt-2"
          >封装了四个方法,用法一致，只是图标不同: createSuccessModal, createInfoModal,
          createErrorModal, createWarningModal
        </li>
        <li class="mt-2">
          <a href="https://www.antdv.com/components/modal-cn">ant Modal 官方文档</a>
        </li>
      </ol>
    </div>

    <CollapseContainer class="w-full bg-white rounded-md">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createSuccessModal, createInfoModal, createErrorModal, createWarningModal } =
    useMessage();

  function showInfo() {
    // 基本用法
    createInfoModal({ title: '基本用法', content: '居中、只有确认按钮' });
  }

  function showSuccess() {
    // 自定义按钮文本
    createSuccessModal({
      title: '不居中展示',
      content: 'success 消息内容',
      centered: false,
    });
  }

  function showWarn() {
    // 监听点击方法
    createWarningModal({
      title: '自定义按钮文本',
      content: 'okText、cancelText 修改按钮文本',
      okText: '已知悉',
    });
  }

  function showError() {
    createErrorModal({
      title: '监听点击按钮',
      content: '监听用户点了 ok 还是 cancel',
      okCancel: true,
      onCancel: () => {
        console.log('用户点击了取消');
      },
      onOk: () => {
        console.log('用户点击了确认');
      },
    });
  }
</script>

<script lang="ts">
  function getDoc() {
    return `

\`\`\`typescript
import { useMessage } from '@/hooks/web/useMessage';

  const { createSuccessModal, createInfoModal, createErrorModal, createWarningModal } = useMessage();

  // 基本用法
  function showInfo() {
    createInfoModal({ title: '基本用法', content: '居中、只有确认按钮' });
  }

  // 不居中展示
  function showSuccess() {
    createSuccessModal({
      title: '不居中展示',
      content: 'success 消息内容',
      centered: false,
    });
  }

  // 自定义按钮文本
  function showWarn() {
    createWarningModal({
      title: '自定义按钮文本',
      content: 'okText、cancelText 修改按钮文本',
      okText: '已知悉',
    });
  }

  // 监听点击按钮
  function showError() {
    createErrorModal({
      title: '监听点击按钮',
      content: '监听用户点了 ok 还是 cancel',
      okCancel: true,
      onCancel: () => {
        console.log('用户点击了取消');
      },
      onOk: () => {
        console.log('用户点击了确认');
      },
    });
  }
\`\`\`

`;
  }
</script>
